<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <p>行：<input type="text"></p>
        <p>列：<input type="text"></p>
        <p><button>创建表格</button></p>
    </div>
    <div class="tablebox"></div>
</body>

</html>
<script>
    //1.根据表单输入的数字创建对应的表格。
    //table使用innerHTML时候回默认生成tbody标签。
    //表单的值是input
    var aP = document.querySelectorAll('.box input');
    var oBtn = document.querySelector('button');
    var oTableBox = document.querySelector('.tablebox');
    oBtn.onclick = function() {
        var cTable = document.createElement('table');
        cTable.border = 1;
        //创建表格行和列
        for (var i = 0; i < aP[0].value; i++) {
            var cTr = document.createElement('tr');
            for (var j = 0; j < aP[1].value; j++) {
                var cTd = document.createElement('td');
                if (j === aP[1].value - 1) { //每一行的最后一列。
                    cTd.innerHTML = '<a href="javascript:;">删除' + i + '</a>';
                } else {
                    cTd.innerHTML = '111111';
                }

                cTr.appendChild(cTd);
            }
            cTable.appendChild(cTr);
        }
        oTableBox.appendChild(cTable);
    }

    //2.表格可以编辑。表格的值在预览的情况下随时改变。
    //事件委托。
    //onfocus:得到焦点(表单，a标签)
    //onblur:失去焦点
    oTableBox.onclick = function(ev) {
        var ev = ev || window.event;
        var element = ev.target || ev.srcElement;
        if (element.tagName === 'TD') {
            //判断TD里面是否存在子元素,如果不存在就创建
            if (!element.children.length) {
                element.innerHTML = '<input value="' + element.innerHTML + '" />';
            }
            // alert(element.children[0]) //获取当前点击的td的第一个子元素。
            // 失去焦点，将input去掉，只需要input里面的value
            element.children[0].onblur = function() {
                //this:指向input
                this.outerHTML = this.value; //this.outerHTML表示input本身以及里面的内容   this.value:里面的值。
            }
        } else if (element.tagName === 'A') { //删除
            element.parentNode.parentNode.parentNode.removeChild(element.parentNode.parentNode);
        }
    }
</script>